<!--房间modal -->
<template>
  <a-modal :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="title" :width="1000" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button @click="visible = false">{{ cancelText }}</a-button>
      <a-button v-if="okText == '保存' && actionType != 'view'" type="primary" @click="handleSubmit">{{
        okText
    }}</a-button>
    </a>
    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-form :form="form" :class="{ disable: actionType == 'view' ? true : false }">

          <a-form-item v-bind="formItemLayout" label="小区名称">
            <a-input v-decorator="['residentialAreaName', { rules: [{ required: true, message: '请填小区名称!' }] }]" />

          </a-form-item>

        </a-form>

      </div>
    </a-spin>

  </a-modal>

</template>

<script>
import { getResidentialAreaList } from '@/api/allApi.js'
import userModal from './userRadio'

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { userModal },
  props: {
    actionType: {
      type: String,
      required: false,
      default: "add",
    },


  },

  data () {
    //这里存放数据
    return {
      a: null,
      action: "add",
      headers: {},
      currentId: null,
      CodeDisabled: false,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: "查看",
      visible: false,
      okText: "保存",
      cancelText: "取消",
      notificationTypeList: [],
      supervisionList: [],
      userSelect: {},
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
      },
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  //方法集合
  methods: {
    view (data) {
      if (data) {
        Object.assign(this, {
          spinning: true,
          visible: true,
          CodeDisabled: false,
          currentId: data.id,
        });
        this.initData(data);
      } else {
        this.visible = true;
        this.form.resetFields()
        this.currentId = null;
      }
      switch (this.actionType) {
        case "add":
          this.okText = '保存'
          this.title = "添加小区";
          break;
        case "edit":
          this.okText = '保存'
          this.title = "编辑小区";
          break;
        case "view":
          this.title = "查看小区";
          this.okText = "取消";
          break;
      }
    },

    closeModal () {
      this.form.resetFields()
      this.visible = false
    },

    initData (data) {
      setTimeout(() => {
        this.spinning = false;
        this.form.setFieldsValue({
          buildingNo: data.buildingNo,
          residentialAreaID: data.residentialAreaID,
        });
      }, 500);
    },
    handleSubmit () {
      let _this = this
      this.form.validateFields((err, values) => {

        if (!err) {
          console.log('Received values of form: ', values);
          let params = {
            ...values,
            id: _this.currentId || '',

          }
          _this.$emit("save", { ...params });

        }
      });
    },
  },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.spin-content {
  padding: 20px;
}

.disable {
  pointer-events: none;
}
</style>